// H5端个人中心页面 - 红色主题
import React from 'react'
import { Card } from 'konsta/react'
import { 
  UserCircle, 
  CreditCard, 
  Shield, 
  Palette, 
  Info, 
  Bot, 
  Headphones, 
  ChevronRight 
} from 'lucide-react'
import designSystem from '../styles/colors'

const ProfilePage = () => {
  const menuItems = [
    { icon: <CreditCard size={20} />, label: '选择账户', value: '', color: 'text-red-500' },
    { icon: <Shield size={20} />, label: '安全与隐私', value: '', color: 'text-red-500' },
    { icon: <Palette size={20} />, label: '主题切换', value: '', color: 'text-red-500' },
    { icon: <Info size={20} />, label: '关于我们', value: '', color: 'text-red-500' },
  ]

  const specialItems = [
    { icon: <Bot size={20} />, label: 'AI模型切换', value: '', color: 'text-red-500' },
    { icon: <Headphones size={20} />, label: '联系客服', value: '', color: 'text-red-500' },
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-red-50 via-orange-50 to-red-100">
      {/* 顶部用户信息卡片 */}
      <div 
        className="relative p-6 pb-8 rounded-b-3xl shadow-lg"
        style={{ background: designSystem.gradients.primary }}
      >
        <div className="flex items-center space-x-4">
          <div className="h-16 w-16 rounded-full bg-white/20 backdrop-blur flex items-center justify-center">
            <UserCircle size={40} className="text-white" />
          </div>
          <div>
            <div className="text-xl font-bold text-white">张译文</div>
            <div className="text-sm text-white/80 mt-1">ID: 202310001</div>
          </div>
        </div>
      </div>

      {/* 设置菜单 */}
      <div className="p-4 -mt-4 space-y-4">
        {/* 设置标题 */}
        <div className="px-2">
          <h2 className="text-lg font-semibold text-gray-800">设置</h2>
        </div>

        {/* 常规设置 */}
        <Card className="!bg-white shadow-md border-0">
          {menuItems.map((item, index) => (
            <button
              key={index}
              className={`flex items-center justify-between w-full p-4 ${
                index !== menuItems.length - 1 ? 'border-b border-gray-100' : ''
              }`}
            >
              <div className="flex items-center space-x-3">
                <div className={item.color}>{item.icon}</div>
                <span className="text-gray-800 font-medium">{item.label}</span>
              </div>
              <ChevronRight size={18} className="text-gray-400" />
            </button>
          ))}
        </Card>

        {/* 特殊设置项 */}
        <Card className="!bg-white shadow-md border-0">
          {specialItems.map((item, index) => (
            <button
              key={index}
              className={`flex items-center justify-between w-full p-4 ${
                index !== specialItems.length - 1 ? 'border-b border-gray-100' : ''
              }`}
            >
              <div className="flex items-center space-x-3">
                <div className={item.color}>{item.icon}</div>
                <span className="text-gray-800 font-medium">{item.label}</span>
              </div>
              <ChevronRight size={18} className="text-gray-400" />
            </button>
          ))}
        </Card>

        {/* 占位提示 */}
        <div className="flex items-center justify-center py-8 text-gray-400">
          <p className="text-center text-sm">
            更多设置功能
            <br />
            <span className="text-xs">待组员实现</span>
          </p>
        </div>
      </div>
    </div>
  )
}

export default ProfilePage

